<template>
	<view class="transfer-accounts-wrapper">
		<div class="payee-wrapper">
			<div class="title">收款人</div>
			<div class="input-wrapper">
				<div class="input-name">
					<u-input class="input" :custom-style="customStyle" placeholder-style="font-size:16px"
						v-model="cphone" type="number" :border="false" placeholder="请输入转入人(C端手机号码)" />
					<div class="name" v-if="payeeInfo!==''">{{payeeInfo.nickName}} {{payeeInfo.gradeName||''}}</div>
				</div>
				<image v-if="payeeInfo!==''" :src="payeeInfo.face" mode="aspectFill" class="image"></image>
			</div>

		</div>
		<div class="transfer-money">
			<div class="title">转赠焕贝金额</div>
			<u-input class="input" :custom-style="customStyle" placeholder-style="font-size:16px" v-model="hbPrice"
				type="number" :border="false" placeholder="请输入金额" />
			<div class="tip" v-if="hbPriceTip">金额格式不正确</div>
			<div class="fee">手续费：{{feePrice||'--'}}</div>
		</div>
		<div class="pay-wallet">
			<div class="title">付款钱包</div>
			<u-checkbox-group :wrap="true">
				<u-checkbox v-model="item.check" v-for="(item, index) in walletList" :key="index" :name="item.owner">
					{{ item.name }}{{item.money}}
				</u-checkbox>
			</u-checkbox-group>
		</div>
		<div class="transfer-money" v-if="walletList.length===2" style="background-color: transparent;">
			<div style="color: red;">钱包支持组合支付，基于{{walletList[1].name}}优先扣款</div>
		</div>
		<div class="button-wrapper">
			<button class="button" @click="Transfer">转赠</button>
			<div class="tansfer-history" @click="toTransferHistory">
				<span class="text">转赠记录</span>
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</div>
		</div>
		<pay-methods @passwordFinish="passwordFinish" ref="payMethods"></pay-methods>
	</view>
</template>

<script>
	import BigNumber from 'bignumber.js'
	import PayMethods from '@/components/pay-methods/pay-methods.vue'
	import storage from "@/utils/storage.js";
	import {
		GetPayeeInfo,
		GetZzWalletDetail,
		CreateTransferOrder,
		PayTransferOrder
	} from "@/api/members.js"

	export default {
		data() {
			return {
				cphone: '', // 收款人手机号
				payeeInfo: '', // 查询出来的收款人信息
				hbPrice: '', // 焕贝金额
				hbPriceTip: false,
				feePrice: '', // 手续费
				customStyle: {
					fontSize: '28px'
				},
				walletList: [], // 钱包列表
			}
		},
		components: {
			PayMethods
		},
		watch: {
			cphone(newValue, oldValue) {
				let result = this.$u.test.mobile(newValue)
				if (result) {
					this.initPayeeInfo()
				} else {
					this.payeeInfo = ''
				}
			},
			hbPrice(newValue, oldValue) {
				let result = this.$u.test.amount(newValue)
				this.hbPriceTip = !result
				if (result) {
					this.initFee(newValue)
				} else {
					this.feePrice = ''
				}
			},
		},
		onLoad() {
			this.initWallet()
		},
		methods: {
			// 根据输入的转赠金额计算手续费
			initFee(money) {
				this.feePrice = new BigNumber(money).multipliedBy(this.fee).dp(2, BigNumber.ROUND_DOWN).toNumber()
			},
			// 初始化钱包 费率 钱包列表 钱包默认值
			initWallet() {
				GetZzWalletDetail().then((res) => {
					let userinfo = storage.getUserInfo()
					this.partnerType = userinfo.partnerType
					this.haveStore = userinfo.haveStore
					let fee = res.data.result.fee || 0.06
					this.fee = fee
					let walletList = []
					// start 余额支付--钱包列表
					let walletSaleValue = res.data.result.walletSaleValue;
					let walletPromoteValue = res.data.result.walletPromoteValue;
					let walletPromoteFwValue = res.data.result.walletPromoteFwValue;
					let walletPromoteHyValue = res.data.result.walletPromoteHyValue;
					if (this.haveStore) {
						walletList.push({
							name: '销售钱包',
							money: new BigNumber(walletSaleValue).dp(2, BigNumber.ROUND_DOWN)
								.toNumber(),
							owner: 'SALE',
							check: false,
						})
					}
					if (this.partnerType === 4 || this.partnerType === 4) {
						walletList.push({
							name: '推广钱包-服务费',
							money: new BigNumber(walletPromoteFwValue).dp(2, BigNumber.ROUND_DOWN)
								.toNumber(),
							owner: 'PROMOTE_FW',
							check: false,
						})
						walletList.push({
							name: '推广钱包-会员费',
							money: new BigNumber(walletPromoteHyValue).dp(2, BigNumber.ROUND_DOWN)
								.toNumber(),
							owner: 'PROMOTE_HY',
							check: false,
						})
					} else if (this.partnerType === 1 || this.partnerType === 2) {
						walletList.push({
							name: '推广钱包',
							money: new BigNumber(walletPromoteValue).dp(2, BigNumber.ROUND_DOWN)
								.toNumber(),
							owner: 'PROMOTE',
							check: false,
						})
					}
					this.walletList = walletList
				})
			},
			// 根据输入的手机号  查询C端人员信息
			initPayeeInfo() {
				GetPayeeInfo(this.cphone).then((res) => {
					let info = res.data.result
					if (info === null) {
						this.payeeInfo = ''
						this.cphone = ''
						uni.showToast({
							title: '账号错误，请重新输入',
							icon: "none"
						})
						return
					}
					if (info.haveStore !== true) {
						let payeeInfo = {
							face: info.face,
							nickName: info.nickName,
						}
						if (info.gradeName === '1') {
							payeeInfo.gradeName = '银卡会员'
						}
						if (info.gradeName === '2') {
							payeeInfo.gradeName = '金卡会员'
						}
						this.payeeInfo = payeeInfo
					} else {
						this.payeeInfo = ''
						this.cphone = ''
						uni.showToast({
							title: '该账号是商家，请重新输入',
							icon: "none"
						})
					}
				})
			},
			walletSelectedChange(e) {
				console.log(e)
			},
			// 转赠按钮
			Transfer() {
				if (this.payeeInfo === '') {
					uni.showToast({
						title: "请输入收款人手机号",
						icon: 'none'
					})
					return
				}
				if (this.feePrice === '') {
					uni.showToast({
						title: "请输入转赠金额或转赠金额格式不正确",
						icon: 'none'
					})
					return
				}
				let owner = ''
				let moneyAll = new BigNumber(this.hbPrice).plus(this.feePrice).toNumber()
				let walletSelect = this.walletList.filter((item) => {
					return item.check
				})
				if (walletSelect.length == 0) {
					uni.showToast({
						title: "请选择钱包",
						icon: 'none'
					})
					return
				} else if (walletSelect.length == 1) {
					if (moneyAll > walletSelect[0].money) {
						uni.showToast({
							title: "钱包余额不足",
							icon: 'none'
						})
						return
					} else {
						owner = walletSelect[0].owner
					}
				} else if (walletSelect.length == 2) {
					if (moneyAll > walletSelect[0].money + walletSelect[1].money) {
						uni.showToast({
							title: "钱包余额不足",
							icon: 'none'
						})
						return
					} else {
						if (moneyAll > walletSelect[1].money) {
							owner = walletSelect[1].owner + ',' + walletSelect[0].owner
						} else {
							owner = walletSelect[1].owner
						}
					}
				}
				this.owmer = owner
				let params = {
					way: "OFFLINE",
					client: "WECHAT_MP",
					owner: owner,
					price: this.hbPrice,
					"payeePhone": this.cphone,
					"commission": this.feePrice
				}
				// 创建转赠订单
				CreateTransferOrder(params).then((res) => {
					if (res.data.success) {
						this.orderSn = res.data.result.sn
						this.$refs.payMethods.showPasswordPopup()
					}
				})
			},
			// 密码输入后的回调
			passwordFinish(password) {
				PayTransferOrder({
					owner: this.owmer,
					orderType: 'TRADE',
					clientType: 'WECHAT_MP',
					paymentPassword: password,
					sn: this.orderSn
				}).then((res) => {
					if (res.data.success) {
						uni.redirectTo({
							url: "/pages/partner/transfer-accounts/transfer-result?sn=" + this.orderSn
						})
					}
				})
			},
			// 跳转到转赠历史记录
			toTransferHistory() {
				uni.navigateTo({
					url: "/pages/partner/transfer-accounts/transfer-history"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.transfer-accounts-wrapper {
		.payee-wrapper {
			margin-top: 24upx;
			padding: 24upx 32upx;
			background-color: #ffffff;

			.title {
				font-weight: bold;
			}

			.input-wrapper {
				display: flex;
				align-items: center;
				height: 240upx;

				.input-name {
					flex: 1;

					.input {}

					.name {
						margin-top: 24upx;
						padding: 16upx 0;
						border-top: 1upx solid #f2f2f2;
					}
				}

				.image {
					margin-left: 24upx;
					flex: 0 0 240upx;
					width: 240upx;
					height: 240upx;
				}
			}
		}

		.transfer-money {
			margin-top: 24upx;
			padding: 24upx 32upx;
			background-color: #ffffff;

			.title {
				font-weight: bold;
				margin-bottom: 24upx;
			}

			.tip {
				color: #ff3437;
				font-size: 24upx;
			}

			.fee {
				margin-top: 24upx;
			}
		}

		.pay-wallet {
			margin-top: 24upx;
			padding: 24upx 32upx;
			background-color: #ffffff;

			.title {
				font-weight: bold;
				margin-bottom: 24upx;
			}
		}

		.button-wrapper {
			margin-top: 100upx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.button {
				width: 320upx;
				height: 80upx;
				line-height: 80upx;
				background: linear-gradient(162.65deg, rgba(0, 162, 255, 1) 0%, rgba(22, 111, 219, 0.65) 100%);
				border-radius: 40upx;
				color: #ffffff;
				font-size: 28upx;
			}

			.tansfer-history {
				width: 200upx;
				margin-top: 16upx;
				padding: 26upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #999999;

			}
		}
	}
</style>
